<template>
  <div class="pmjl-container">
    <table class="pmjl-table" border="1">
      <caption>
        地层三压力剖面
      </caption>
      <colgroup>
        <col width="33%" />
        <col width="33%" />
        <col width="33%" />
      </colgroup>

      <tr style="height: 5rem; text-align: center; vertical-align: bottom">
        <td>PP</td>
        <td>
          <div class="c-red">C_isotope</div>
          <hr class="c-red" />
          <div class="c-red both-clear">
            <span class="pull-left">-60</span>
            <span class="pull-right">0</span>
          </div>
          <div>Coco3</div>
        </td>
        <td>
          <div class="c-red">C1</div>
          <hr class="c-red" />
          <div class="c-red both-clear">
            <span class="pull-left">0.1</span>
            <span class="pull-right">10</span>
          </div>
          <div>TG<small>25</small></div>
        </td>
      </tr>
      <tr style="height: 1rem">
        <td>
          <span class="pull-left">0</span>
          <span class="pull-right">15</span>
        </td>
        <td>
          <span class="pull-left">0</span>
          <span class="pull-right">20</span>
        </td>
        <td>
          <span class="pull-left">0.1</span>
          <span class="pull-right">10</span>
        </td>
      </tr>
      <tr class="tr-chart">
        <td>
          <div id="chart1" class="chart-container"></div>
        </td>
        <td>
          <div id="chart2" class="chart-container"></div>
        </td>
        <td>
          <div id="chart3" class="chart-container"></div>
        </td>
      </tr>
    </table>
    <!-- <div id="chart" style="width: 100%;height:500px;"></div> -->
  </div>
</template>

<script>
import api from "@/api/api.js"

export default {
  name: "YourComponent",
  mounted() {
    this.$nextTick(this.initialize)
  },
  data() {
    return {
      chart1: null,
      chart2: null,
      chart3: null,
      echartsData: []
    }
  },
  methods: {
    initialize() {
      this.chart1 = this.$echarts.init(document.getElementById("chart1"))
      this.chart2 = this.$echarts.init(document.getElementById("chart2"))
      this.chart3 = this.$echarts.init(document.getElementById("chart3"))
      this.retrieveEchartsData()
    },
    retrieveEchartsData() {
      api
        .post("/pmjl/getPmjlEchartsList")
        .then(response => {
          // 处理成功的响应
          this.echartsData = response.data.pmjlEchartsList || []
          return this.echartsData
        })
        .then(this.renderEcharts)
        .catch(() => {
          this.echartsData = []
        })
    },
    renderEcharts() {
      var depths = []
      var pps = []
      var pcs = []
      var pfs = []
      this.echartsData.forEach(item => {
        depths.push(item.depth)
        pps.push(item.pp)
        pcs.push(item.pc)
        pfs.push(item.pf)
      })
      this.renderChart1(pps, depths)
      this.renderChart2(pcs, depths)
      this.renderChart3(pfs, depths)
    },
    renderChart1(ds, depths) {
      const dataset = this.echartsData
      const option = {
        grid: {
          top: 0,
          left: 0,
          right: 0,
          bottom: 0
        },
        tooltip: {
          trigger: "axis"
        },
        yAxis: {
          type: "category",
          data: depths
        },
        xAxis: {
          type: "value",
          axisLine: {
            show: true
          }
        },
        legend: {
          orient: "vertical",
          right: 10,
          top: 50
        },
        series: [
          {
            name: "MSE",
            type: "scatter", // 这里设置曲线的类型为'line'，你也可以设置为'area'来创建面积图等
            data: dataset.map(t => [t.mse, t.depth]),
            // symbol: 'none', // 不显示数据点
            symbolSize: 2
          },
          {
            name: "MSEN",
            type: "scatter", // 这里设置曲线的类型为'line'，你也可以设置为'area'来创建面积图等
            data: dataset.map(t => [t.msen, t.depth]),
            // symbol: 'none', // 不显示数据点
            symbolSize: 2
          }
        ]
      }
      this.chart1.setOption(option)
    },
    renderChart2(ds, depths) {
      const dataset = this.echartsData
      const option = {
        grid: {
          top: 0,
          left: 0,
          right: 0,
          bottom: 0
        },
        tooltip: {
          trigger: "axis"
        },
        yAxis: {
          data: depths
        },
        xAxis: {
          axisLine: {
            show: true
          }
        },
        legend: {
          orient: "vertical",
          right: 10,
          top: 50
        },
        series: [
          {
            name: "DC指数",
            type: "scatter", // 这里设置曲线的类型为'line'，你也可以设置为'area'来创建面积图等
            data: dataset.map(t => [t.dc, t.depth]),
            // symbol: 'none', // 不显示数据点
            symbolSize: 2
          },
          {
            name: "DcN",
            type: "scatter", // 这里设置曲线的类型为'line'，你也可以设置为'area'来创建面积图等
            data: dataset.map(t => [t.dcn, t.depth]),
            // symbol: 'none', // 不显示数据点
            symbolSize: 2
          }
        ]
      }
      this.chart2.setOption(option)
    },
    renderChart3(ds, depths) {
      const dataset = this.echartsData
      const option = {
        grid: {
          top: 0,
          left: 0,
          right: 0,
          bottom: 0
        },
        tooltip: {
          trigger: "axis"
        },
        yAxis: {
          type: "category",
          data: depths
        },
        xAxis: {
          type: "value",
          axisLine: {
            show: true
          }
        },
        legend: {
          orient: "vertical",
          right: 10,
          top: 50
        },
        series: [
          {
            name: "ECD",
            type: "scatter", // 这里设置曲线的类型为'line'，你也可以设置为'area'来创建面积图等
            data: dataset.map(t => [t.dc, t.depth]),
            // symbol: 'none', // 不显示数据点
            symbolSize: 2
          },
          {
            name: "Pp-Dc",
            type: "scatter", // 这里设置曲线的类型为'line'，你也可以设置为'area'来创建面积图等
            data: dataset.map(t => [t.ppdc, t.depth]),
            // symbol: 'none', // 不显示数据点
            symbolSize: 2
          }
        ]
      }
      this.chart3.setOption(option)
    },
    initChart() {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(document.getElementById("chart"))
      var depths = []
      var pps = []
      var pcs = []
      var pfs = []
      api
        .post("/pmjl/getPmjlEchartsList")
        .then(response => {
          // 处理成功的响应
          this.echartsData = response.data.pmjlEchartsList
          this.echartsData.forEach(item => {
            depths.push(item.depth)
            pps.push(item.pp)
            pcs.push(item.pc)
            pfs.push(item.pf)
          })
          console.log("cccccccccccccc:", depths)
          // 指定图表的配置项和数据
          const option = {
            title: {
              text: "地层三压力剖面"
            },
            tooltip: {
              trigger: "axis"
            },
            legend: {
              data: ["pp", "pc", "pf"]
            },
            yAxis: {
              type: "category",
              data: depths
            },
            xAxis: {
              type: "value",
              axisLine: {
                show: true
              }
            },
            series: [
              {
                name: "pp",
                type: "line", // 这里设置曲线的类型为'line'，你也可以设置为'area'来创建面积图等
                data: pps
              },
              {
                name: "pc",
                type: "line", // 这里设置曲线的类型为'line'，你也可以设置为'area'来创建面积图等
                data: pcs
              },
              {
                name: "pf",
                type: "line", // 这里设置曲线的类型为'line'，你也可以设置为'area'来创建面积图等
                smooth: true,
                data: pfs
              }
            ]
          }
          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option)
        })
        .catch(error => {
          console.error("There was an error!", error)
        })
    }
  }
}
</script>

<style lang="css" scoped>
.pmjl-container {
  width: 100%;
  overflow: hidden;
  padding: 0 3rem;
}

.pmjl-table {
  border-collapse: collapse;
  width: 100%;
}

.tr-chart td {
  padding: 0;
}

.chart-container {
  height: 1500px;
}

.pull-left {
  float: left;
  top: 0;
}

.pull-right {
  float: right;
  top: 0;
}

.c-red {
  color: red;
}

.both-clear {
  clear: both;
  height: 1.25rem;
  line-height: 1.25rem;
}
</style>
